<template>
  <div class="w-screen h-screen">
    <van-nav-bar left-arrow @click="onClickLeft">
      <template #right>
        <span class="text-xs text-gray-400"></span>
      </template>
    </van-nav-bar>
    <h1 class="text-2xl font-blod text-center my-10">注册</h1>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="nickname"
          name="nickname"
          label="昵称"
          placeholder="昵称"
          :rules="[{ required: true, message: '请填写昵称' }]"
        />
      </van-cell-group>
      <div class="mt-4 mx-4">
        <van-button round block native-type="submit">注册</van-button>
      </div>
      <div class="text-center my-3" @click="router.push('/login')">
        已有帐号？点击登录
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "../api/index";
import { useRouter } from "vue-router";
import { showToast } from "vant";

const username = ref("");
const password = ref("");
const nickname = ref("");
const router = useRouter();

const onClickLeft = () => {
  router.push("/login");
};
const onSubmit = async (values) => {
  const res = await axios.post("/user/register", values);
  console.log(values);
  showToast(res.msg);
  setTimeout(() => {
    router.push("/login");
  }, 1500);
};
</script>

<style scoped>
:deep(.van-icon-arrow-left) {
  @apply text-2xl text-black;
}
:deep(.van-checkbox__icon--checked .van-icon) {
  @apply bg-[#e6723c] border-[#e6723c];
}
</style>
